<template>
        <li @click.prevent="selectItem(data.id)">
          <div class="check" @click.stop="set_check(data.cartid,data.sign)">
            <b  :class="data.sign===1?'active':''"></b>
          </div>
          <div class="img_wrap">
            <div>
              <div>
                <div>
                  <img v-lazy="data.img" alt="">
                </div>
              </div>
            </div>
          </div>
          <div class="info_wrap">
            <p>{{data.names}}</p>
            <p>{{data.spaces}}</p>
            <div>
              <p>¥{{data.price}}/{{data.unit}}</p>
              <div @click.stop>
                <b @click.stop="add_car_number"></b>
                  <input @click.stop @blur="input_blur" v-model="input_amount" type="number">
                <b @click.stop="remove_car_number"></b>
              </div>
            </div>
          </div>
        </li>
</template>

<script type="text/ecmascript-6">
  import {get_item_list} from 'api/recommend'
  import {set_shop_car,remove_shop_car,set_shop_check} from 'api/shop_car'
  import {get_cookie} from 'assets/cookie/cookie'
  import {fang_pin} from 'assets/base/base'
  import {mapMutations} from 'vuex'

  export default {
    props: ['data','isReload'],
    data() {
      return {
          input_amount:0,
          isone:true
      }
    },
    activated(){
      this.isone=true
    },
    created() {
      this.oldVal=this.data.amount  //回滚时需要的数据
      this.input_amount=this.data.amount //让input数据放置数量

      this.$watch('input_amount',function (newVal) { //监视input数据变化
        this.input_amount=newVal===""?"":Math.floor(newVal)
        if(this.input_amount<1&&this.input_amount!==''){ //没有值时或小于1时都为1
          this.input_amount=1
        }
        if(this.input_amount>999){
          this.input_amount=999
        }
          fang_pin(200,()=>{   //300毫秒放频繁函数
            if(this.input_amount>0){
              set_shop_car({
                token:get_cookie('key'),
                id:this.data.id,
                amount:this.input_amount}).then((res)=>{
                  console.log(res)
                if(res.status===200&&res.data.resStatus===0){
                  this.oldVal=res.data.data.amount
                  this.$emit('get_shop_car')  //更新数据
                }else if(res.data.resStatus===-1){ //当库存不够时
                  this.input_amount=this.oldVal   //回滚
                  this.setHint({
                    text:res.data.message,
                    isHint:true,
                    ok:false
                  })
                }else{
                  this.setIsLogin(false)    //如果是别的值那么就让他去登录
                }
              })
            }
          })

      })

      this.$watch('data',function (newVal) {
          if( this.isone===true||this.isReload){  //当第一次进来时需要校正数值
            this.input_amount=newVal.amount
          }
          this.isone=false
      })

    },
    mounted() {
    },
    computed: {},
    methods: {
      selectItem(id) {
        this.$emit('selectItem', id)
      },
      get_shop_car() {
        this.$emit('get_shop_car')
      },
      set_check(id,sign){
        if(sign===1){
          sign=0
        }else{
          sign=1
        }
        this.data.sign=sign

        this.$emit('set_all_check',[id],sign)
      },
      add_car_number(){
          this.input_amount++
        if(this.data.sign===0){
          set_shop_check({
            token:get_cookie('key'),
            cartId:[this.data.cartid],
            sign:1}).then((res)=>{
            if(res.status===200&&res.data.resStatus===0){
              this.$emit('get_shop_car')
            }
          })
        }

      },
      input_blur(){
        if(this.input_amount===''){
          this.input_amount=this.oldVal
        }
      },
      remove_car_number(){
          this.input_amount--
      },
      ...mapMutations({
        setIsLogin: 'SET_IS_LOGIN',
        setHint:'SET_HINT'
      })
    },
    components: {}
  }
</script>

<style scoped lang="scss">
  @import "../assets/sass/mixin";
 li {
   width: 95%;
   margin: 0 auto;
   position: relative;
   background-color: #fff;
   padding-bottom: 7px;
   padding-top: 11px;
   overflow: hidden;
   border-bottom: 1px solid #eee;
          > .img_wrap {
            width: 70px;
            height:88px;
            margin: 0 auto;
            position: relative;
            float: left;
            border: 1px solid #eee;
            margin-left: 32px;
            >div{
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              overflow: hidden;
              >div{
                display: table;
                width: 100%;
                height: 100%;
                >div{
                  display: table-cell;
                  vertical-align: middle;
                  > img {
                    width: 100%;
                    height: auto;
                  }
                }
              }

            }
          }
          >.info_wrap{
            overflow: hidden;
            height: 88px;
            padding-left: 10px;
            padding-right: 10px;
            > p {
              text-align: left;
              margin-top: 3px;
              font-size: 13px;
              line-height: 17px;
              height: 17px;
              @include text-ellipsis(1);
            }
            >p:nth-child(2){
              font-size: 12px;
              color: #aaa;
            }
            >div {
              height: 25px;
              margin-top: 22px;
              >p{
                float: left;
                height: 25px;
                line-height: 25px;
                color: #58b7ec;
                font-size: 15px;
                font-weight: bold;
              }
              >div{
                float: right;
                height: 25px;
                width: 90px;
                >b{
                  float: right;
                  height: 26px;
                  width: 26px;
                  border-radius: 50%;
                  font-size: 20px;
                  background-size: 100% 100%;
                  background-image: url('../assets/img/add.png');
                }
                  input{
                    float: right;
                    padding-left: 3px;
                    width: 38px;
                    padding-right: 3px;
                    margin-top: 5px;
                    height: 16px;
                    border-radius: 5px;
                    font-size: 14px;
                    outline: none;
                    color: #4caeea;
                    border: none;
                    text-align: center;
                  }
                >b:nth-child(3){
                  line-height: 19px;
                  background-image: url('../assets/img/remove.png');
                }
              }
            }
          }
        }
  .check{
    position: absolute;
    width: 30px;
    height: 100%;
    top: 0;
    left: 0;
    >b{
      float: left;
      width: 20px;
      height: 20px;
      border: 1px solid #bbb;
      border-radius: 50%;
      margin-top: 41px;
      margin-left: 3px;
      background-size: 100% 100%;
    }
    >.active{
      background-image: url('../assets/img/active.png');
      border:none;
    }
  }
</style>
